<template>
  <a-modal
    :title="modalTitle"
    :width="600"
    :visible="visible"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    v-bind="{ ...(modalType === 'view' ? { footer: null } : {}) }"
  >
    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item :label="$t('tenant.name')" prop="name">
          <span v-if="modalType === 'view'">{{ form.name }}</span>
          <s-input v-else :limit="64" :maxLength="64" v-model="form.name" />
        </a-form-model-item>

        <a-form-model-item :label="$t('contact.contact')" prop="name">
          <span v-if="modalType === 'view'">{{ form.name }}</span>
          <s-input v-else :limit="64" :maxLength="64" v-model="form.name" />
        </a-form-model-item>

        <a-form-model-item :label="$t('contact.phone')" prop="prefix">
          <span v-if="modalType === 'view'">{{ form.prefix }}</span>
          <s-input v-else :limit="100" :maxLength="100" v-model="form.prefix" />
        </a-form-model-item>

        <a-form-model-item :label="$t('contact.email')" prop="prefix">
          <span v-if="modalType === 'view'">{{ form.prefix }}</span>
          <s-input v-else :limit="100" :maxLength="100" v-model="form.prefix" />
        </a-form-model-item>

        <a-form-model-item :label="$t('contact.address')" prop="prefix">
          <span v-if="modalType === 'view'">{{ form.prefix }}</span>
          <s-input v-else :limit="100" :maxLength="100" v-model="form.prefix" />
        </a-form-model-item>

        <a-form-model-item :label="$t('admin.account')" prop="prefix">
          <span v-if="modalType === 'view'">{{ form.prefix }}</span>
          <s-input v-else :limit="100" :maxLength="100" v-model="form.prefix" />
        </a-form-model-item>

        <a-form-model-item :label="$t('admin.password')" prop="prefix">
          <span v-if="modalType === 'view'">{{ form.prefix }}</span>
          <template v-else>
            <s-input :limit="100" :maxLength="100" v-model="form.prefix" />
            <a @click="handleRandomPwd">随机生成</a>
          </template>
        </a-form-model-item>

        <!-- <a-form-model-item
          :label="$t('modules.preparation.suffix')"
          prop="suffix"
          :rules="[{ validator: limitValidator }]"
        >
          <span v-if="modalType === 'view'">{{ form.suffix }}</span>
          <s-input v-else :limit="100" :maxLength="100" v-model="form.suffix" @change="handleFieldChange" />
        </a-form-model-item>

        <a-form-model-item
          :label="$t('modules.preparation.contain')"
          prop="contain"
          :rules="[{ validator: limitValidator }]"
        >
          <span v-if="modalType === 'view'">{{ form.contain }}</span>
          <s-input v-else :limit="100" :maxLength="100" v-model="form.contain" @change="handleFieldChange" />
        </a-form-model-item>

        <a-form-model-item :label="$t('common.description')" prop="description">
          <span v-if="modalType === 'view'">{{ form.description }}</span>
          <s-textarea v-else :limit="200" :autoSize="{ minRows: 3, maxRows: 5 }" v-model="form.description" />
        </a-form-model-item> -->
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
import { SInput, STextarea } from '@/components'
import { asyncValidateMixin, modalMixin } from '@/utils/mixins'
// import { createBarcode, updateBarcode, validateBarcode } from '@/api/preparation/barcode'

export default {
  name: 'TenantModal',
  components: { SInput, STextarea },
  mixins: [asyncValidateMixin, modalMixin],

  data () {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      visible: false,
      confirmLoading: false,
      modalType: 'add',
      form: {}
    }
  },

  mounted () {
    // this.$_asyncValidateMixin_init([
    //   {
    //     fieldName: 'name',
    //     caller: validateBarcode,
    //     extraParams: () => {
    //       return this.form.id ? { id: this.form.id } : {}
    //     },
    //   },
    // ])
  },

  methods: {
    add () {
      this.visible = true
      this.modalType = 'add'
    },

    edit (record) {
      this.visible = true
      this.modalType = 'edit'
      this.form = {
        ...record
      }
    },

    handleCancel () {
      this.visible = false
      this.form = {}
      this.$refs.form.resetFields()
      // this.$_asyncValidateMixin_resetFields()
    },

    // limitValidator(rule, value, callback) {
    //   const { limit } = this
    //   if (!this.$isEmpty(value) && value.trim().length > limit) {
    //     callback(new Error(this.$t('modules.common.upToCountChars', { count: limit })))
    //   }
    //   callback()
    // },

    // requiredFieldsValidator(rule, value, callback) {
    //   const { len, prefix, suffix, contain } = this.form
    //   if (this.$isEmpty(len) && this.$isStrEmpty(prefix) && this.$isStrEmpty(suffix) && this.$isStrEmpty(contain)) {
    //     callback(new Error(this.$t('modules.preparation.barcodeRequiredFields')))
    //   }
    //   callback()
    // },

    /**
     * length修改后触发相关校验
     */
    // handleLengthChange() {
    //   this.$refs.form.validateField(['prefix', 'suffix', 'contain'], () => {})
    // },

    // handleFieldChange() {
    //   this.$refs.form.validateField('len', () => {})
    // },

    handleRandomPwd () {},

    handleOk () {
      // this.confirmLoading = true
      // this.$refs.form.validate((valid) => {
      //   if (valid) {
      //     const { id, name, len, prefix, suffix, contain, description } = this.form
      //     const params = {
      //       name: name.trim(),
      //       len,
      //       prefix: this.$isEmpty(prefix) ? '' : prefix.trim(),
      //       suffix: this.$isEmpty(suffix) ? '' : suffix.trim(),
      //       contain: this.$isEmpty(contain) ? '' : contain.trim(),
      //       description: this.$isEmpty(description) ? '' : description.trim()
      //     }
      //     let api = createBarcode
      //     if (id) {
      //       api = updateBarcode
      //       params.id = id
      //     }
      //     api(params)
      //       .then((res) => {
      //         this.$message.success(this.$t(res.message))
      //         this.handleCancel()
      //         this.$emit('ok')
      //       })
      //       .finally(() => {
      //         this.confirmLoading = false
      //       })
      //   } else {
      //     this.confirmLoading = false
      //   }
      // })
    }
  }
}
</script>
